<template>
  <!-- 添加或修改角色配置对话框 -->
  <el-card class="user-container">
    <div class="setUser">
      <el-row>
        <div>账号设置</div>
      </el-row>
      <el-row class="btnStyle">
        <el-col :span="1.5">
          <el-button type="primary" style="width:100px;">修改资料</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button style="width:100px;margin-left:20px">修改密码</el-button>
        </el-col>
      </el-row>
    </div>
        <el-form
          ref="roleRef"
          :model="form"
          :rules="rules"
          label-width="100px"
          class="userform"
          label-position="top"
        >
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="用户名:" prop="roleName">
                    <el-input v-model="form.roleName" placeholder="请输入用户名"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11" style="margin-left:20px;">
                  <el-form-item label="单位:" prop="roleName">
                    <el-input v-model="form.roleName" placeholder="请输入单位"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="部门:" prop="roleName">
                    <el-input v-model="form.roleName" placeholder="请输入部门"/>
                  </el-form-item>
                </el-col>
                <el-col :span="11" style="margin-left:20px;">
                  <el-form-item label="职务:" prop="roleName">
                    <el-input v-model="form.roleName" placeholder="请输入职务"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="12">
              <div class="head-portrait">
                <ImageUpload
                  :limit="'1'"
                  :fileSize="'5'"
                  :isShowTip="true"
                  @modelValue="modelValue"
                />
              </div>
            </el-col>
          </el-row>
        </el-form>

    <div class="footer">
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup name="user">
import { ElMessage, ElMessageBox } from 'element-plus'
import api from '@/api'
import ImageUpload from '@/components/ImageUpload/index.vue'
const router = useRouter()
const { proxy } = getCurrentInstance()
const open = ref(false)
const title = ref('')
onMounted(() => {})
const data = reactive({
    form: {},
    rules: {
        menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
        orderNum: [{ required: true, message: '菜单顺序不能为空', trigger: 'blur' }],
        path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
    },
})
const { form, rules } = toRefs(data)
//上传数据
const modelValue = list => {
    form.value.fileList = list
}
/** 提交按钮 */
function submitForm() {
    proxy.$refs['roleRef'].validate(valid => {
        if (valid) {
            console.log(form.value, 'form.value')
        }
    })
}
/** 取消按钮 */
function cancel() {
    form.value = {
        fileList: undefined,
        roleName: undefined,
    }
    proxy.resetForm('roleRef')
}
</script>

<style lang="less" scoped>
.user-container {
    position: relative;
    width: 97.5%;
    height: 83%;
    bottom: 50px;
    left: 0px;
    box-sizing: border-box;
    overflow: hidden;
    background: #fcfcfc;
    .setUser {
        width: 100%;
        padding: 20px 18px;
        margin-top: -20px;
        margin-left: -20px;
        background: #fff;
        .btnStyle {
            padding: 20px 10px;
        }
    }
    .userform {
        padding: 20px 10px;
        .head-portrait {
            float: right;
            width: 20%;
            margin-right: 150px;
            margin-top: -80px;
        }
    }
}
.footer {
    position: fixed;
    bottom: 100px;
    left: 17.25%;
    width: 81.1%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    background: #fff;
    z-index: 99;
    .dialog-footer {
        margin-right: 40px;
    }
}
</style>
